<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="icon" type="image/png" href="https://i.loli.net/2018/05/11/5af50d7591443.jpg">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="apple-mobile-web-app-title" content="蓁奕科技" />
    <meta name="keywords" content="" />
    <meta name="author" content="" />
    <meta name="COPYRIGHT" content="" />
    <meta name="renderer" content="webkit">
    <title>报读课程</title>
    <link rel="stylesheet" href="https://unpkg.com/cube-ui/lib/cube.min.css">
    <link href="https://cdn.bootcss.com/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet">
</head>

<body>
    <div id='app'>
        <header data-am-widget="header" class="am-header am-header-default am-header-fixed" style="background:url('http://app.cenjiawen.com/pxlm/img/pxlmappbanner.png') no-repeat center">
            <h1 class="am-header-title">报读课程</h1>
        </header>
        <hr />
        <!-- <p style="padding-left: 16px">${(info.name)!""}</p> -->
        <form class="am-form am-form-horizontal" style="padding: 0px;">
            <div class="am-form-group">
                <label class="am-u-sm-3 am-form-label">学生姓名</label>
                <div class="am-u-sm-9">
                    <input type="text" placeholder="输入学生姓名" class="am-form-field am-radius" v-model='form.studentName'>
                </div>
            </div>
            <div class="am-form-group">
                <label class="am-u-sm-3 am-form-label">性别</label>
                <div class="am-u-sm-9">
                    <select id="doc-select-1" v-model='form.sex' placeholder="输入选择性别">
                        <option :value="1">男</option>
                        <option :value="2">女</option>
                    </select>
                </div>
            </div>
            <div class="am-form-group">
                <label class="am-u-sm-3 am-form-label">学校</label>
                <div class="am-u-sm-9">
                    <select id="doc-select-1" v-model='form.studentSchoolId' placeholder="输入选择学校">
                        <option :value="item.id" v-for='item in schools'>{{item.name}}</option>
                    </select>
                </div>
            </div>
            <div class="am-form-group">
                <label class="am-u-sm-3 am-form-label">年级</label>
                <div class="am-u-sm-9">
                    <select id="doc-select-1" v-model='form.gradeNo' placeholder="输入选择年级">
                        <option :value="index+1" v-for='(item,index) in ["一年级","二年级","三年级","四年级","五年级","六年级"]'>{{item}}</option>
                    </select>
                </div>
            </div>
            <div class="am-form-group">
                <label class="am-u-sm-3 am-form-label">班级</label>
                <div class="am-u-sm-9">
                    <select id="doc-select-1" v-model='form.classNo' placeholder="输入选择班级">
                        <option :value="item" v-for='item in [1,2,3,4,5,6,7,8,9,10]'>{{item}}班</option>
                    </select>
                </div>
            </div>
            <div class="am-form-group">
                <label class="am-u-sm-3 am-form-label">学生年龄</label>
                <div class="am-u-sm-9">
                    <input type="number" placeholder="输入学生年龄" v-model='form.age'>
                </div>
            </div>
            <div class="am-form-group">
                <label class="am-u-sm-3 am-form-label">家长姓名</label>
                <div class="am-u-sm-9">
                    <input type="text" placeholder="输入家长姓名" v-model='form.parentName'>
                </div>
            </div>
            <div class="am-form-group">
                <label class="am-u-sm-3 am-form-label">电话号码</label>
                <div class="am-u-sm-9">
                    <input type="text" placeholder="输入电话号码" v-model='form.mobile'>
                </div>
            </div>
            <div class="am-form-group">
                <label class="am-u-sm-3 am-form-label">就读学校</label>
                <div class="am-u-sm-9">
                    <input type="text" placeholder="输入就读学校" v-model='form.schoolName'>
                </div>
            </div>
            <div class="am-form-group">
                <label class="am-u-sm-3 am-form-label">备注</label>
                <div class="am-u-sm-9">
                    <textarea class="" rows="5" id="doc-ta-1" v-model='form.mark' placeholder="输入备注"></textarea>
                </div>
            </div>
            <div class="am-form-group" style="padding: 8px;">
                <button type="button" class="am-btn am-btn-success am-round am-btn-block" @click='onSubmit'>下一步</button>
            </div>
        </form>
    </div>
    <#include "/pxlm/app/product/components/scripts.html" />
    <script src="https://unpkg.com/cube-ui/lib/cube.min.js"></script>
    <script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data: {
            // schools: toJson2('${schools!}'),
            schools: [{ id: 4, name: '品学联萌总部' }],
            form: {
                studentName: '',
                age: '',
                parentName: '',
                mobile: '',
                schoolName: '',
                mark: '',
                sex: 1,
                studentSchoolId: null,
                classNo: 1,
                gradeNo: 1
            }
        },
        mounted: function() {
            this.init();
            this.form.studentSchoolId = this.schools[0].id
        },
        methods: {
            init() {
                var url = '${host!}/pxlm/app/product/api/studentInfo';
                var params = {
                };
                var success = res => {
                    console.log(res);
                    if (res.info) {
                        this.form = res.info;
                    }
                }
                var fail = res => {
                    console.log(res);
                }
                var complete = () => {}
                request(url, params, success, fail, complete);
            },
            onSubmit() {
                if (this.form.studentName == '') {
                    msg('请填写学生姓名')
                    return
                }
                if (this.form.mobile == '') {
                    msg('请填写电话号码')
                    return
                }
                var url = '${host!}/pxlm/app/product/api/updateStudentInfo'
                var params = {
                    json: JSON.stringify(this.form)
                };
                var success = res => {
                    console.log(res);
                    // remind("提交学生信息成功", function() {
                    window.location.href = '/pxlm/app/product/confirm';
                    // })

                    // var url = '${host!}/pxlm/app/product/cart';
                    // var params = {};
                    // var success = function (res) {
                    //     console.log(res);
                    //     var cart = res.info;

                    //     var url = '${host!}/pxlm/app/product/pay';
                    //     var params = {
                    //         cart: JSON.stringify(cart)
                    //     };
                    //     var success = function (res) {
                    //         console.log(res);
                    //         window.location.href = '${host!}' + res.info;
                    //     }
                    //     var fail = function (res) {
                    //         console.log(res);
                    //     }
                    //     var complete = function () {}
                    //     request(url, params, success, fail, complete);
                    // }
                    // var fail = function (res) {
                    //     console.log(res);
                    // }
                    // var complete = function () {}
                    // request(url, params, success, fail, complete);
                }
                var fail = res => {
                    console.log(res);
                }
                var complete = () => {}
                request(url, params, success, fail, complete);
            },
            priview: function(url) {},
            change(value, index, text) {
                // console.log('change', value, index, text)
                goPages([{
                    key: '',
                    value: ''
                }])
            }
        }
    })
    </script>
</body>

</html>